const { List } = antd;

const OutlineList = ({ onItemClick, data }) => {
    // 定义状态来存储列表数据
    const [outlines, setOutlines] = useState(data);

    // 在组件挂载时从数据库加载数据
    useEffect(() => {
        setOutlines(data)
    }, [data]);

    // 处理列表项点击事件
    const handleItemClick = (item) => {
        if (onItemClick) {
            onItemClick(item);
        }
    };

    return (
        <List
            dataSource={outlines}
            renderItem={(item) => (
                <List.Item onClick={() => handleItemClick(item)}>
                    <List.Item.Meta
                        title={item.title}
                        description={item.content.slice(0, 50)}
                    />
                </List.Item>
            )}
        />
    );
};

